<script lang="ts" setup>
import { ref } from 'vue'

const emit = defineEmits(['submitBright'])

const props = defineProps({
  imgData: {
    type: String,
    required: true,
  },
})

const isLoading = ref(false)

//打开窗口

const dialogVisible = ref(false)
const nodeData = ref()
const num = ref(0)

const openDialog = (data: any) => {
  nodeData.value = data
  dialogVisible.value = true
}

const save = () => {
  emit('submitBright', num.value)
  closeDialog()
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  dialogVisible.value = false
  num.value = 0
}

defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="亮度调节"
    width="40%"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <div class="brightContent">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-image :src="props.imgData"></el-image>
          <p>调整前</p>
        </el-col>
        <el-col :span="12">
          <el-image
            :style="'filter:brightness(' + (num / 2 + 100) + '%)'"
            :src="props.imgData"
          ></el-image>
          <p>调整后</p>
        </el-col>
      </el-row>
      <el-slider :min="-100" :max="100" v-model="num"></el-slider>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save()" :loading="isLoading">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style></style>
